<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :form="form"
      @reset="reset"
      @handleTableData="handleTableData"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
    <div class="panel">
      <div class="panel-header">
        <slot name="header">设备生涯数据</slot>
      </div>
      <div class="detail-content">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="panel.pageSize"
          layout="slot"
        >
          <button
            type="button"
            class="btn-prev"
            :disabled="panel.currentPage === 1"
            @click="() => handleCurrentChange(panel.currentPage - 1)"
          >
            <i class="el-icon el-icon-arrow-left"></i>
          </button>
          <ul class="el-pager">
            <li class="number active">
              {{ panel.currentPage }}
            </li>
          </ul>
          <button
            type="button"
            class="btn-next"
            :disabled="deviceLog.length < panel.pageSize"
            @click="() => handleCurrentChange(panel.currentPage + 1)"
          >
            <i class="el-icon el-icon-arrow-right"></i>
          </button>
        </el-pagination>
        <template v-for="(item, index) in panel.data">
          <div :key="index" class="log-item">{{ item }}</div>
        </template>
        <div class="text-center" v-if="!deviceLog.length">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import { deviceLog } from '@/api/device'
export default {
  name: 'deviceLog',
  components: { TableSearch },
  data() {
    return {
      form: {
        endTime: null,
        startTime: null,
        deviceIds: this.$route.query.deviceId,
      },
      searchPath: '/web/device-management/device-log/查询',
      deviceLog: [],
      panel: {
        currentPage: 1,
        pageSize: 1000,
        data: [],
      },
      formItemsInline: [
        {
          type: 'text',
          value: 'deviceIds',
          placeholder: '请输入设备编号',
          clearable: true,
        },
        {
          slot: 'date',
        },
        {
          type: 'checkbox',
          value: 'logTypes',
          options: [
            {
              label: 'INFO',
              text: '普通信息',
            },
            {
              label: 'LOGIN',
              text: '设备注册',
            },
            {
              label: 'LOGOUT',
              text: '设备离线',
            },
            {
              label: 'HEART',
              text: '设备心跳',
            },
            {
              label: 'OVERLOAD',
              text: '电流过载',
            },
            {
              label: 'HIGHTEMP',
              text: '过温',
            },
            {
              label: 'TIMEOUT',
              text: '指令超时',
            },
            {
              label: 'RAW_IN',
              text: '原始消息-接收',
            },
            {
              label: 'RAW_OUT',
              text: '原始消息-发送',
            },
            {
              label: 'HARDWARE_LOG',
              text: '设备硬件日志',
            },
            {
              label: 'LOGIN_INVALID',
              text: '非法注册',
            },
          ],
        },
      ],
    }
  },

  methods: {
    reset() {
      this.form = {
        endTime: null,
        startTime: null,
      }
    },
    handleTableData(params) {
      params = Object.assign({}, params, { index: 0 })
      this.panel.currentPage = 1

      deviceLog(params).then((res) => {
        this.deviceLog = res
        this.panel.data = this.deviceLog
      })
    },
    handleCurrentChange(currentPage) {
      if (this.panel.currentPage === currentPage) return
      this.panel.currentPage = currentPage
      let params = {
        endTime: this.form.endTime,
        startTime: this.form.startTime,
        deviceIds: this.form.deviceIds,
        index: currentPage - 1,
        logTypes: this.form.logTypes,
      }
      deviceLog(params).then((res) => {
        this.deviceLog = res
        this.panel.data = this.deviceLog
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.detail-content {
  margin: 0 45px;
  background: #f5f6f8;
  height: 100%;
  min-height: 400px;
  padding: 10px;
  color: #807f7f;
}
.log-item {
  word-wrap: break-word;
}
</style>
